<template>
    <div class="con">
        <div class="header"></div>
        <div class="main">
            <img src="../assets/images/logo.png" alt>
        </div>
        <div class="btn" @click="downApp()">点击安装 V1.0</div>
        <div class="footer">
            <img src="../assets/images/footerbg.png" alt>
            <div class="info">
                <p>对于产品如有任何意见或建议，请通过以下方式联系我们！</p>
                <p>
                    <span>025-66046356</span> （客服电话）
                </p>
            </div>
        </div>
        <Shade v-show="showWx"></Shade>
    </div>
</template>

<script>
import Shade from "./shade";
export default {
    name: "download",
    components: {
        Shade
    },
    data() {
        return {
            showWx: false
        };
    },
    methods: {
        downApp() {
            let ua = navigator.userAgent.toLowerCase();
            let userAgent = navigator.userAgent.toLowerCase();
            //android终端
            let isAndroid =
                ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1; //ios终端
            let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isWeixinBrowser()) {
                console.log(1);
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    window.location =
                        "https://itunes.apple.com/cn/app/id1457665026";
                } else if (/(Android)/i.test(navigator.userAgent)) {
                    this.showWx = true;
                }
            } else if (userAgent.match(/Alipay/i) == "alipay") {
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    window.location =
                        "https://itunes.apple.com/cn/app/id1457665026";
                } else if (/(Android)/i.test(navigator.userAgent)) {
                    //android
                    this.showWx = true;
                }
            } else {
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    //ios
                    window.location =
                        "https://itunes.apple.com/cn/app/id1457665026";

                    // alert("ios")
                } else if (/(Android)/i.test(navigator.userAgent)) {
                    //android

                    window.location =
                        "http://pda.aixuepai.com.cn:8060/kbUpdate/Download/kb.apk";
                } else {
                    window.location =
                        "http://pda.aixuepai.com.cn:8060/kbUpdate/Download/kb.apk";
                }
            }

            function isWeixinBrowser() {
                return /micromessenger/.test(ua) ? true : false;
            }
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #fff;
    position: relative;
}
.header {
    width: 100%;
    height: 15px;
    background: #ffae4e;
}
.main {
    width: 167px;
    height: 194px;
    margin: 0 auto;
    margin-top: 20%;
}
.main img {
    width: 167px;
    height: 194px;
}
.btn {
    width: 184px;
    height: 48px;
    background: #ffae4e;
    text-align: center;
    line-height: 48px;
    border-radius: 24px;
    box-shadow: 0px 10px 30px 0px #ffc47e;
    margin: 0 auto;
    margin-top: 20%;
    color: #fff;
    font-size: 16px;
}
.footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
}
.footer img {
    width: 100%;
}
.footer .info {
    position: absolute;
    bottom: 20px;
    width: 100%;
}
.info p {
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
}

.info p span {
    font-weight: 800;
    font-size: 16px;
}
</style>
